<template>
    <div>
        <h1>添加 编辑 删除</h1>
        <table border="1">
            <tr><th>序号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>操作</th></tr>
            <tr v-for="(student, i) in list" :key="i">
                <td>{{i}}</td>
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
                <td>{{student.sex}}</td>
                <td>
                    <a @click="Update(student)">修改 </a>
                     <a @click="Delate01(i)">删除 </a>
                </td>
            </tr>
        </table>
        姓名 <input type="text" v-model="student.name"><br>
        年龄 <input type="number" v-model="student.age"><br>
        性别 <input type="text" v-model="student.sex"><br>
        <button @click="add">新增</button>
    </div>
</template>


<script>
export default {
       name:"xtm",
        data() {
            return {
                list:[
                    {name:'阿泽', age:18, sex:'男'},
                    {name:'若泽', age:18, sex:'男'},
                    {name:'小明', age:18, sex:'男'},
                ],
                student:{
                    name:"",
                    age:'',
                    sex:""
                }
            }
        },
        methods: {
            add() {
               this.list.unshift(this.student),
               this.student={}
            },
            Update(a) {
                this.student = a;
            },
            Delate01(b){
                this.list.splice(b, 1);
            }
        },
}
</script>

<style>

</style>